<template>
    <div>
        <el-dialog
            title="修改套餐"
            :visible.sync="dialogVisible"
            width="880px"
        >
            <el-form ref="form" :model="form" label-width="120px" size="small">
                <el-form-item label="名称:" prop="name"
                              :rules="[{required: true, message: '请输入名称', trigger: 'blur'}]">
                    <el-input :autofocus="true" v-model="form.name" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item label="积分:" prop="score">
                    <el-input :autofocus="true" v-model="form.score" placeholder="请输入积分"></el-input>
                </el-form-item>
                <el-form-item label="农作物:" prop="cropsId">
                    <el-select v-model="form.cropsId" placeholder="请选择" style="width: 100%;">
                        <el-option
                            v-for="item in cropsList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="种子:" prop="seedId">
                    <el-select v-model="form.seedId" placeholder="请选择" style="width: 100%;">
                        <el-option
                            v-for="item in seedList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="价格:" prop="price">
                    <el-input :autofocus="true" v-model="form.price" placeholder="请输入价格"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel" size="small">取 消</el-button>
                <el-button type="primary" @click="onSubmit" size="small">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {mapState} from "vuex";
import {upDateCombination} from "@/index/api/index/adoption/adoptionManage/package/index"
import {seedList} from "@/index/api/index/adoption/adoptionManage/seed/index"
import {cropsList} from "@/index/api/index/adoption/adoptionManage/adoptionPackage/cropsManage/index"

export default {
    data() {
        return {
            dialogVisible: false,
            form: {
                name: "",
                score: "",
                activityId: 0,
                cropsId: "",
                seedId: "",
                price: ""
            },
            seedList: [],
            cropsList: [],
        }
    },
    computed: {
        ...mapState(["token"]),
    },
    mounted() {
        this.getSeedList()
        this.getCropsList()
    },
    methods: {
        cancel() {
            this.dialogVisible = false;
        },
        showDialog(e, row) {
            this.form = row
            const matchedItem = this.seedList.find(item => item.name === row.seedId);
            if(matchedItem){
                this.form.seedId = matchedItem.id
            }
            const matchedItem1 = this.cropsList.find(item => item.name === row.cropsId);
            if(matchedItem1){
                this.form.cropsId = matchedItem1.id
            }
            this.dialogVisible = !this.dialogVisible
        },
        onSubmit() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    upDateCombination(this.form, this.form.id).then(res => {
                        if (res.code == 200) {
                            this.dialogVisible = false;
                            this.$message({
                                message: res.message,
                                type: "success",
                            });
                            this.$parent.getFarmList();
                        } else {
                            this.$message({
                                message: res.message,
                                type: "error",
                            });
                        }
                    })
                } else {
                    this.$message.warning('请输入正确的信息')
                }

            });

        },
        getSeedList() {
            seedList({page: 1, size: 10}).then(res => {
                if (res.code == 200) {
                    this.seedList = res.data.items
                }
            })
        },
        getCropsList() {
            cropsList({page: 1, size: 10}).then(res => {
                if (res.code == 200) {
                    this.cropsList = res.data.items
                }
            })
        }

    }
}
</script>

<style lang="less" scoped>

.flex-container {
    display: flex;
    align-items: center; /* 垂直居中 */
    margin-top: 10px;
}
</style>
